<script setup>
import { RouterView, useRoute, useRouter } from 'vue-router'
import { getUser } from './api';
import TarBar from './components/TarBar.vue'
import useUser from './stores/user';
import { ref, watch, onMounted } from 'vue'
const route= useRoute()
const router= useRouter()
const onClickLeft = () =>{
  if(history.length>1){
    router.back()
  }
  else{
    router.push({ name: 'home' })
  }
}
const isShowTabbar= ref(true)

const { user, updateUser } = useUser()

watch(
  () =>route.meta,
  val =>{
    isShowTabbar.value=val.isTab
  }
)

onMounted(()=>{
  if(user.isLogin){
    loadUser();
  }
})

const loadUser = async()=>{
  const data= await getUser()
  updateUser({
    isLogin: true,
    username: data.username,
    avatar: data.avatar
  })
}
</script>

<template>
  <van-nav-bar :title="$route.meta.title" v-show="$route.meta.isShowNav" @click-left="onClickLeft" :left-arrow="$route.meta.isShowBack" fixed placeholder style="height: 46px"/>
  <router-view></router-view>
  <TarBar v-if="isShowTabbar"></TarBar>
</template>

<style>
#app {
  color: #2c3e50;
  line-height: 24px;
  --van-nav-bar-background: #ff8000;
  --van-nav-bar-title-text-color: #fff;
  --van-nav-bar-icon-color: #fff;
}
</style>
